<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{lib/css/main.css}">
    <link rel="stylesheet" th:href="@{/lib/css/public.css}">

    <script th:src="@{/lib/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>



</head>

<style>
    body{
        background-image: url("images/background/page_bg.JPG");
        background-size: 100%;

    }

</style>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    $(function () {

        //编辑
        edituser = function(data){
            layui.use('layer', function(){
                var layer = layui.layer;

                layer.open({

                    title: ['用户信息'],
                    type: 2,
                    content: 'page/user/edituser.html',
                    shadeClose: true,
                    area: ['550px', '650px'],
                    success: function (layero,index) {
                        console.log(data);
                        var body = layui.layer.getChildFrame('body', index);
                        body.find(".username").val(data.username);
                        body.find(".userpassword").val(data.userpassword);
                        body.find(".email").val(data.email);
                        body.find(".birthday").val(data.birthday);
                        body.find(".activeCode").val(data.activeCode);
                        body.find(".userid").val(data.userid);
                        layui.form.render();
                    },
                    cancel:function () {
                        window.location.reload();
                    },
                    end:function () {

                        window.location.reload();

                    }
                });

            });
        }

        //添加用户
        adduser = function(data){
            layui.use('layer', function(){
                var layer = layui.layer;

                layer.open({

                    title: ['用户信息'],
                    type: 2,
                    content: 'page/user/adduser.html',
                    shadeClose: true,
                    area: ['550px', '650px'],
                    success: function (layero,index) {
                        console.log(data);
                        var body = layui.layer.getChildFrame('body', index);
                        body.find(".username").val(data.username);
                        body.find(".password").val(data.password);
                        body.find(".email").val(data.email);
                        body.find(".birthday").val(data.birthday);
                        body.find(".activeCode").val(data.activeCode);
                        body.find(".userid").val(data.userid);

                        layui.form.render();
                    },
                    cancel:function () {
                        window.location.reload();
                    },
                    end:function () {

                        window.location.reload();

                    }
                });

            });
        }



    });

</script>

<body>
<!--<div th:replace="menu/left :: leftbar" ></div>-->
<!--<div th:replace="menu/top :: topbar"></div>-->


<div class="table">
    <h2 class="tablename">用户信息表</h2>
    <hr class="layui-bg-gray">
<table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块





        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 600
            ,url: 'user/table' //数据接口
            ,title: '用户表'
            ,page: true //开启分页

            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档

            ,cols: [ [ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'userid', title: 'ID', width:'8%', sort: true}
                ,{field: 'username', title: '用户名', width:'10%'}
                ,{field: 'images', title: '头像', sort: false,
                    templet:function (d) { return '<div><img style="height: 30px;width: 30px" src='+d.images+'></div>' }

                }
                ,{field: 'userpassword', title: '密码', width: '10%', sort: true}
                ,{field: 'email', title: '邮箱', width:'15%', sort: true}
                ,{field: 'birthday', title: '生日', width: '10%', sort: true}
                ,{field: 'gender', title: '性别', width:'8%'}
                ,{field: 'roleList', title: '角色', width: '15%'}
                ,{fixed: 'right', width: '15%', align:'center', toolbar: '#barDemo'}


            ] ]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    adduser();
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        var userdata =  data[0];
                        edituser(userdata);

                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm("是否确认删除？",function () {
                            for(var i=0;i<data.length;i++){
                                var userid = data[i].userid;
                                console.log(userid);
                                $.ajax({
                                    type:"post",
                                    url:'delete/'+userid
                                });
                                window.location.reload();
                            }
                        });


                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('是否确认删除？', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    var userid = obj.data.userid;

                    $.ajax({
                        type:"post",
                        url:'delete/'+userid
                    });

                    window.location.reload();

                });
            } else if(layEvent === 'edit'){
                edituser(data);


            }
        });

//
    });
</script>
</body>

</html>